<!--
- File:    花园首页.
-->
<template>
  <div>
    <div class="Web_Box">
      <mt-swipe :auto="4000" class="banner swiper-container" style="height: 8rem">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide" @click="gotoUrl(item.adv_pic_url)">
            <img :src="$config.imgsite + $config.adImgSrc + item.adv_pic + '_w640h320'" alt=""/></div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="garden_top f-cb">
        <div class="fl">
          <router-link :to="{name: 'diary-add'}">
            <a class="btn_top mr15">发布遇见</a>
          </router-link>
          <router-link :to="{name: 'article-add'}">
            <a class="btn_top">发表文章</a>
          </router-link>
        </div>
        <div class="fr" style="position: relative">
            <a class="btn_top" @click="gotoPlantList">所有植物</a><a class="btn2_top" @click="gotoTaskList">全部任务</a>
          <span class="num-notice2" v-show="taskNum > 0">{{taskNum}}</span>
        </div>
      </div>
      <div class="Garden_tab ">
        <ul class="f-cb Tabs2">
          <li :class="{'on': tabType == $dictionary.gardenType.private}" @click="switchTabType($dictionary.gardenType.private)">我的花园</li>
          <li :class="{'on': tabType == $dictionary.gardenType.share}" @click="switchTabType($dictionary.gardenType.share)">共享花园</li>
        </ul>
      </div>
      <div class="graden_tabcont" v-show="tabType == $dictionary.gardenType.private">

      <div class="graden_cont" @click="gotoGardenDetail(garden.moodGarden, 'true', 'false')" v-if="garden.moodGarden">
        <ul class="f-cb">
          <li class="mood_graden">
            <a><img :src="garden.moodGarden.cover_img || defaultGardenImg">
            </a>
            <span class="num-notice" v-show="garden.moodGarden.hastask_flower_num && garden.moodGarden.hastask_flower_num > 0">{{garden.moodGarden.hastask_flower_num}}</span>
          </li>
          <li><a>
            <div class="graden_bg">
              <h3>{{garden.moodGarden.garden_name}}({{garden.moodGarden.flower_num}}) <span style="color: #aaa; font-size: 12px;">(编号:{{garden.moodGarden.g_id}})</span></h3>
              <p>{{garden.moodGarden.city_name}}</p>
              <p>创建时间：{{garden.moodGarden.add_time}}</p>
            </div>
          </a></li>
        </ul>
      </div>
        <div class="graden_cont" v-for="item in garden.myGarden" @click="gotoGardenDetail(item, 'false', 'false')" v-if="garden.myGarden">
        <ul class="f-cb">
          <li class="mood_graden"><a><img :src="(!item.cover_img || item.cover_img == '') ? defaultGardenImg :($config.imgsite + $config.uploadImgSrc + item.cover_img + '_w200') ">
          </a>
            <span class="num-notice" @click.stop="gotoGardenDetail(item, 'false', 'true')" v-show="item.hastask_flower_num && item.hastask_flower_num > 0">{{item.hastask_flower_num}}</span>
          </li>
          <li><a>
            <div class="graden_bg">
              <h3>{{item.garden_name}}({{item.flower_num}}) <span style="color: #aaa; font-size: 12px;">(编号:{{item.g_id}})</span></h3>
              <p style="font-size: 12px">{{item.city_name}}</p>
              <p style="font-size: 12px">创建时间：{{item.add_time}}</p>
            </div>
          </a></li>
        </ul>
      </div>
      </div>
      <div class="graden_tabcont" v-show="tabType == $dictionary.gardenType.share"  v-infinite-scroll="loadMore"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="graden_cont" v-for="item in shareGardenList.data" @click="gotoShareGardenChildList(item)">
          <ul class="f-cb">
            <li class="mood_graden"><a><img :src="(!item.cover_img || item.cover_img == '') ? defaultGardenImg :($config.imgsite + $config.uploadImgSrc + item.cover_img + '_w200') ">
            </a>
              <span class="num-notice" @click.stop="gotoShareGardenChildList(item, true)" v-show="item.hastask_flower_num && item.hastask_flower_num > 0">{{item.hastask_flower_num}}</span>
            </li>
            <li><a>
              <div class="graden_bg">
                <h3>{{item.garden_name}}  <span style="color: #aaa; font-size: 12px;">(编号:{{item.sg_id}})</span></h3>
                <p style="font-size: 12px">{{item.city_name}}</p>
                <!--<p style="font-size: 12px">创建时间：{{item.add_time}}</p>-->
                <p style="font-size: 12px">管理员：{{item.member_name}}</p>
                <p style="font-size: 12px" v-show="(item.start_time || item.end_time)">共享周期：{{item.start_time | timestampToDate('yyyy-MM-dd')}}~{{item.end_time | timestampToDate('yyyy-MM-dd')}}</p>

              </div>
            </a></li>
          </ul>
        </div>
        <div v-show="shareGardenList.allLoaded && shareGardenList.data.length <= 0" style="height: 3rem; line-height: 3rem; background: #fff; text-align: center;margin-bottom: 0.5rem">
          当前没有共享花园~
        </div>
      </div>
      <div class="add_gran f-cb">
        <a @click="gotoAddGarden" class="add_btn2">新建花园</a>
        <a class="add_btn3" @click="gotoDeleted">已删除的花园</a>
      </div>
    </div>
    <!--<div class="Photograph"><a href="index.html"><i class="iconfont icon-app-index-a"></i></a></div>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'

  export default{
    data() {
      return {
        tabType: this.$route.query.showType || this.$dictionary.gardenType.private, // 0 我的花园 1 共享花园
        defaultGardenImg: require('../../assets/images/demo/xinqing.png'),
        garden: {},
        shareGardenList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        bannerList: [],
        taskNum: 0
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    created() {
      this.getGardenList()
      this.getShareGardenList(this.shareGardenList.page, this.shareGardenList.pageSize)
      this.getBannerList()
      this.getTaskNum()
    },
    mounted() {
      this.$native.weixinShare(window.location.href)
    },
    methods: {
      gotoAddGarden() {
        this.$router.push({name: 'garden-add', query: {type: this.tabType}})
      },
      gotoUrl(url) {
        if (url != '') {
          window.location.href = url // eslint-disable-line
        }
      },
      getTaskNum() {
        let param = {
          is_share: 0,
          state: 0,
          type: 3
        }
        this.$request.getTaskList(param).then(data => {
          let total = 0
          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].task.length; j++) {
              if (data[i].task[j].state == '0') {
                total++
              }
            }
          }
          this.taskNum = total
        }).finally(() => {
        })
      },
      switchTabType(value) {
        this.tabType = value
        this.$router.replace({name: 'garden-list', query: {showType: value}})
      },
      gotoPlantList() {
        this.$router.push({name: 'plant-list'})
      },
      // isDefault 是否是默认花园（心情花园）
      gotoGardenDetail(garden, isDefault, taskVisible) {
        this.$router.push({name: 'garden-detail', params: {id: garden.g_id}, query: {isCreator: '1', taskVisible: taskVisible, isDefault: isDefault, areaId: garden.area_id, areaName: garden.area_id ? garden.city_name + ' ' + garden.area_name : undefined, title: garden.garden_name}})
      },
      gotoShareGardenChildList(garden) {
        this.$router.push({name: 'garden-child-list', query: {parentId: garden.sg_id, isCreator: garden.is_creator, title: garden.garden_name}})
      },
      gotoTaskList() {
        this.$router.push({name: 'task-list'})
      },
      gotoDeleted() {
        if (this.tabType == this.$dictionary.gardenType.private) {
          this.$router.push({name: 'garden-deleted'})
        } else if (this.tabType == this.$dictionary.gardenType.share) {
          this.$router.push({name: 'garden-share-deleted'})
        }
      },
      getGardenList() {
        this.$request.getGardenList().then(data => {
          this.garden = data
        })
      },
      getShareGardenList(page, pageSize) {
        this.shareGardenList.loading = true
        this.$request.getShareGardenList(page, pageSize).then(data => {
          if (pageSize > data.length) {
            this.shareGardenList.allLoaded = true
          }
          this.shareGardenList.data = [...this.shareGardenList.data, ...data]
        }).finally(() => {
          this.shareGardenList.requested = true
          this.shareGardenList.loading = false
        })
      },
      loadMore() {
        if (this.tabType != this.$dictionary.gardenType.share) {
          return
        }
        if (this.shareGardenList.loading || this.shareGardenList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getShareGardenList(++this.shareGardenList.page, this.shareGardenList.pageSize)
        }, 500)
      },
      getBannerList() {
        this.$request.getGardenBannerList().then(data => {
          this.bannerList = data
        })
      }
    }
  }
</script>

<style>
  .num-notice2 {
    position: absolute;
    top: -8px;
    right: -8px;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #e60012;
    border-radius: 50%;
  }
</style>